<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>打卡数据控制中心-位置信息管理</title>
    <!-- base:css -->
    <link rel="stylesheet" href="/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="/vendors/css/vendor.bundle.base.css">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/izitoast/iziToast.min.css" />
    <!-- endinject -->
    <link rel="shortcut icon" href="/images/favicon.png" />
</head>

<body>
    <div class="container-scroller d-flex" id="home">
        <!-- partial:./partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas">
            <ul class="nav">
                <li class="nav-item sidebar-category">
                    <p>导航</p>
                    <span></span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/">
                        <i class="mdi mdi-view-quilt menu-icon"></i>
                        <span class="menu-title">总控制台</span>
                        <div class="badge badge-info badge-pill">2</div>
                    </a>
                </li>
                <li class="nav-item sidebar-category">
                    <p>常用功能</p>
                    <span></span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/location">
                        <i class="mdi mdi-near-me menu-icon"></i>
                        <span class="menu-title">位置管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/user">
                        <i class="mdi mdi-account menu-icon"></i>
                        <span class="menu-title">微信用户管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="docs/documentation.html">
                        <i class="mdi mdi-file-document-box-outline menu-icon"></i>
                        <span class="menu-title">Documentation</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <button class="btn bg-danger btn-sm menu-title">演示</button>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- partial -->
        <div class="container-fluid page-body-wrapper">
            <!-- partial:./partials/_navbar.html -->
            <nav class="navbar col-lg-12 col-12 px-0 py-0 py-lg-4 d-flex flex-row" id="navbar">
                <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
                    <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
							<span class="mdi mdi-menu"></span>
						</button>
                    <div class="navbar-brand-wrapper">
                        <a class="navbar-brand brand-logo" href="/"><img src="/images/logo.svg" alt="logo" /></a>
                        <a class="navbar-brand brand-logo-mini" href="/"><img src="/images/logo-mini.svg" alt="logo" /></a>
                    </div>
                    <h4 class="font-weight-bold mb-0 d-none d-md-block mt-1">欢迎回来, 管理员</h4>
                    <ul class="navbar-nav navbar-nav-right">
                        <li class="nav-item">
                            <h4 class="mb-0 font-weight-bold d-none d-xl-block">
                                {{formatDate(date,this)}}
                            </h4>
                        </li>
                        <li class="nav-item dropdown mr-1">
                            <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center" id="messageDropdown" href="#" data-toggle="dropdown">
                                <i class="mdi mdi-calendar mx-0"></i>
                                <span class="count bg-info">2</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown">
                                <p class="mb-0 font-weight-normal float-left dropdown-header">Messages</p>
                                <a class="dropdown-item preview-item">
                                    <div class="preview-thumbnail">
                                        <img src="/images/faces/face4.jpg" alt="image" class="profile-pic">
                                    </div>
                                    <div class="preview-item-content flex-grow">
                                        <h6 class="preview-subject ellipsis font-weight-normal">
                                            David Grey
                                        </h6>
                                        <p class="font-weight-light small-text text-muted mb-0">
                                            The meeting is cancelled
                                        </p>
                                    </div>
                                </a>
                                <a class="dropdown-item preview-item">
                                    <div class="preview-thumbnail">
                                        <img src="/images/faces/face2.jpg" alt="image" class="profile-pic">
                                    </div>
                                    <div class="preview-item-content flex-grow">
                                        <h6 class="preview-subject ellipsis font-weight-normal">
                                            Tim Cook
                                        </h6>
                                        <p class="font-weight-light small-text text-muted mb-0">
                                            New product launch
                                        </p>
                                    </div>
                                </a>
                                <a class="dropdown-item preview-item">
                                    <div class="preview-thumbnail">
                                        <img src="/images/faces/face3.jpg" alt="image" class="profile-pic">
                                    </div>
                                    <div class="preview-item-content flex-grow">
                                        <h6 class="preview-subject ellipsis font-weight-normal">
                                            Johnson
                                        </h6>
                                        <p class="font-weight-light small-text text-muted mb-0">
                                            Upcoming board meeting
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="nav-item dropdown mr-2">
                            <a class="nav-link count-indicator dropdown-toggle d-flex align-items-center justify-content-center" id="notificationDropdown" href="#" data-toggle="dropdown">
                                <i class="mdi mdi-email-open mx-0"></i>
                                <span class="count bg-danger">1</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
                                <p class="mb-0 font-weight-normal float-left dropdown-header">通知</p>
                                <a class="dropdown-item preview-item">
                                    <div class="preview-thumbnail">
                                        <div class="preview-icon bg-success">
                                            <i class="mdi mdi-information mx-0"></i>
                                        </div>
                                    </div>
                                    <div class="preview-item-content">
                                        <h6 class="preview-subject font-weight-normal">Application Error</h6>
                                        <p class="font-weight-light small-text mb-0 text-muted">
                                            Just now
                                        </p>
                                    </div>
                                </a>
                                <a class="dropdown-item preview-item">
                                    <div class="preview-thumbnail">
                                        <div class="preview-icon bg-warning">
                                            <i class="mdi mdi-settings mx-0"></i>
                                        </div>
                                    </div>
                                    <div class="preview-item-content">
                                        <h6 class="preview-subject font-weight-normal">Settings</h6>
                                        <p class="font-weight-light small-text mb-0 text-muted">
                                            Private message
                                        </p>
                                    </div>
                                </a>
                                <a class="dropdown-item preview-item">
                                    <div class="preview-thumbnail">
                                        <div class="preview-icon bg-info">
                                            <i class="mdi mdi-account-box mx-0"></i>
                                        </div>
                                    </div>
                                    <div class="preview-item-content">
                                        <h6 class="preview-subject font-weight-normal">New user registration</h6>
                                        <p class="font-weight-light small-text mb-0 text-muted">
                                            2 days ago
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </li>
                    </ul>
                    <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
							<span class="mdi mdi-menu"></span>
						</button>
                </div>
                <div class="navbar-menu-wrapper navbar-search-wrapper d-none d-lg-flex align-items-center">
                    <ul class="navbar-nav mr-lg-2">
                        <li class="nav-item nav-search d-none d-lg-block">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="在这里搜索..." aria-label="search" aria-describedby="search">
                            </div>
                        </li>
                    </ul>
                    <ul class="navbar-nav navbar-nav-right">
                        <li class="nav-item nav-profile dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                                <img src="https://api.ms.nuogit.com/data/user/20210204101710 (5).jpg" alt="profile" />
                                <span class="nav-profile-name">管理员</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                                <a class="dropdown-item">
                                    <i class="mdi mdi-settings text-primary"></i> 设置
                                </a>
                                <a class="dropdown-item" href="/auth/logout">
                                    <i class="mdi mdi-logout text-primary"></i> 注销
                                </a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link icon-link">
                                <i class="mdi mdi-plus-circle-outline"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link icon-link">
                                <i class="mdi mdi-web"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link icon-link">
                                <i class="mdi mdi-clock-outline"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            <!-- partial -->
            <div class="main-panel" id="usersApp">
                <div class="content-wrapper">
                    <!-- 你的页面内容 -->
                    <div class="card">
                        <!-- @*更新窗口启动引信*@ -->
                        <button id="edituserInfo-button" type="button" data-toggle="modal" data-target="#edituserInfo-modal" style="display: none"></button>
                        <div id="edituserInfo-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title"> <i class="fa fa-post"></i> {{operateTitle}} </h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    </div>
                                    <!-- @*enctype="multipart/form-data"*@ -->
                                    <form class="p-2" id="edituserInfo-form">
                                        <div class="modal-body p-4">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div asp-validation-summary="All" class="text-danger"></div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="control-label">姓名</label>
                                                        <input class="form-control" id="chinesename" v-model="userInfoDto.chinesename" placeholder="张三">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="control-label">专业名称</label>
                                                        <input class="form-control" id="majorName" v-model="userInfoDto.majorname" placeholder="软件工程">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="control-label">班级号</label>
                                                        <input type="number" class="form-control" id="classNumber" v-model="userInfoDto.classnumber" placeholder="1803">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal" id="edituserInfo-closebutton">
													关闭
												</button>
                                            <button type="button" class="btn btn-info waves-effect waves-light" v-on:click="submitFrom(operateTitle)">
													提交
												</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- /.modal -->

                        <div class="card-body">
                            <h4 class="card-title">微信用户列表</h4>
                            <!-- @*<p class="card-description">
								Add class <code>.table-striped</code>
							</p>*@ -->
                            <div class="" style="">
                                <button type="button" class="btn btn-primary" v-on:click="reloaduserInfos" style="padding:5px 10px;height:40px;line-height:20px">
										<i class="mdi mdi-reload"></i> 刷新数据
									</button>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped text-center">
                                    <thead>
                                        <tr>
                                            <th>
                                                头像
                                            </th>
                                            <th>
                                                姓名
                                            </th>
                                            <th>
                                                微信昵称
                                            </th>
                                            <th>
                                                专业名称
                                            </th>
                                            <th>
                                                班级号
                                            </th>
                                            <th>
                                                性别
                                            </th>
                                            <th>
                                                创建时间
                                            </th>
                                            <th>
                                                操作
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        <tr v-for="(userInfo,index) in userInfos" :key="index">
                                            <td>
                                                <img :src="userInfo.avatarurl" alt="image" />
                                            </td>
                                            <td>
                                                {{userInfo.chinesename}}
                                            </td>
                                            <td>
                                                {{userInfo.nickname}}

                                                <!-- <div class="progress">
					                              <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
					                            </div> -->
                                            </td>
                                            <td>
                                                {{userInfo.majorname}}
                                            </td>
                                            <td>
                                                {{userInfo.classnumber}}
                                            </td>
                                            <td>
                                                {{userInfo.sex}}
                                            </td>
                                            <td>
                                                {{userInfo.createtime}}
                                            </td>
                                            <td>
                                                <a href="#" v-on:click="editStart(userInfo.id,'更新微信用户')"><span><i
																class="mdi mdi-lead-pencil"
																style="font-size:20px"></i></span></a>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- content-wrapper ends -->
                <!--             partial:./partials/_footer.html-->
                <footer class="footer">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-sm-flex justify-content-center justify-content-sm-between py-2">
                                <p class="text-center text-sm-left d-block d-sm-inline-block mb-0">Copyright © 2021 NGIT. All rights reserved.</p>
                            </div>
                        </div>
                    </div>
                </footer>
                <!-- partial -->
            </div>
            <!-- main-panel ends -->
        </div>
        <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!--调试环境-->
    <script src="/js/vue.js"></script>
    <!-- base:js -->
    <script src="/vendors/js/vendor.bundle.base.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/izitoast/iziToast.min.js"></script>
    <script src="/izitoast/iziToast.init.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <script src="/vendors/chart.js/Chart.min.js"></script>
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="/js/off-canvas.js"></script>
    <script src="/js/hoverable-collapse.js"></script>
    <script src="/js/template.js"></script>
    <!-- endinject -->
    <!-- End custom js for this page-->
    <script type="text/javascript">
        let jq = $;
        let home = new Vue({
            el: '#home',
            data() {
                return {
                    date: new Date(),
                    operateTitle: '',
                    userInfoDto: {
                        majorName: '',
                        classNumber: '',
                        chineseName: ''
                    },
                    userInfos: [],
                    userInfoId: ''
                }
            },
            created: function() {
                let that = this;
                this.timer = setInterval(() => {
                    that.date = new Date(); //修改日期数据
                }, 1000);
                this.reloaduserInfos();
            },
            methods: {
                setZero(a) { //设置小于10的数字在加0
                    return a < 10 ? "0" + a : a;
                },
                formatDate(date, vm) { //当前时间格式化处理
                    let str = "";
                    let weekDay = [
                        "星期天",
                        "星期一",
                        "星期二",
                        "星期三",
                        "星期四",
                        "星期五",
                        "星期六"
                    ];
                    str += vm.setZero(date.getFullYear()) + "年"; //获取年份
                    str += vm.setZero(date.getMonth() + 1) + "月"; //获取月份
                    str += vm.setZero(date.getDate()) + "日"; //获取日
                    str += " " + weekDay[date.getDay()]; //获取星期
                    str += " " + vm.setZero(date.getHours()) + ":"; //获取时
                    str += " " + vm.setZero(date.getMinutes()) + ":"; //获取分
                    str += vm.setZero(date.getSeconds()); //获取秒
                    return str;
                },

                operateChange: function(title) {
                    this.operateTitle = title;
                },
                clearuserInfoDto: function() {
                    this.userInfoDto = {
                        id: '',
                        majorname: '',
                        classnumber: '',
                        chinesename: ''
                    };
                },
                submitFrom: function(e) {
                    let that = this;
                    console.log(that.userInfoDto);
                    if (that.userInfoId == "") {
                        errorMsg("获取数据失败", "正在重新登录!", function() {
                            window.location.href = "/auth/logout";
                        });
                        return;
                    }
                    axios.put("/api/wechat_users", that.userInfoDto)
                        .then(function(res) {
                            console.log(res);
                            jq("#edituserInfo-closebutton").click();
                            that.clearuserInfoDto();
                            that.reloaduserInfos();
                            successMsg("成功", res.data.message, function() {});
                        }).catch(function(err) {
                            console.log(err);
                        });
                    return;
                },
                reloaduserInfos: function() {
                    let that = this;
                    axios.get("/api/wechat_users")
                        .then(function(res) {
                            that.userInfos = [];
                            console.log(res)
                            let entities = res.data.entities;
                            if (entities) {
                                that.userInfos = that.userInfos.concat(entities);
                                successMsg("成功", res.data.message);
                                return;
                            }
                            errorMsg("获取数据失败", "正在重新登录!", function() {
                                window.location.href = "/auth/logout";
                            });
                        })
                        .catch(function(err) {
                            console.log(err);

                        });
                },
                getLoc: function(id) {
                    console.log(id);
                    let that = this;
                    return new Promise((resolve) => {
                        if (id == "undefined" || id == '') {
                            idIsNullOrEmptyErrorMsg();
                            resolve(false);
                        }
                        axios.get("/api/wechat_users/" + id)
                            .then(res => {
                                console.log(res);
                                let entity = res.data.entities;
                                that.userInfoId = entity.id;
                                that.userInfoDto = {
                                    id: entity.id,
                                    majorname: entity.majorname,
                                    classnumber: entity.classnumber,
                                    chinesename: entity.chinesename
                                };
                                console.log(that.userInfoDto);
                                resolve(res);
                            })
                            .catch(error => {
                                resolve(error)
                            });
                    });
                },
                editStart: async function(id, title) {
                    this.operateChange(title);
                    const res = await this.getLoc(id);
                    if (!res) {
                        return;
                    }
                    jq("#edituserInfo-button").click();
                },
            },
            destroyed() {
                if (this.timer) {
                    clearInterval(this.timer); // 在Vue实例销毁前，清除当前日期定时器
                };
            }
        });
    </script>
</body>

</html>